<template>
  <div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in goodsInfo.spuImageItems" :key="index">
        <img :src="image.img" />
      </van-swipe-item>
    </van-swipe>
    <div class="goodsInfo adapt">
      <div class="goodsInfo-left">
        <p class="title">{{goodsInfo.title}}</p>
        <div class="tags-out">
          <van-tag v-for="(item2,index) in goodsInfo.tags" :key="index" type="primary" class="tags">
            {{item2}}
          </van-tag>
        </div>
        <p class="subtitle">{{goodsInfo.description}}</p>
        <p class="price">￥{{goodsInfo.price}}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24"/>
      <van-goods-action-icon :badge="getCount" icon="cart-o" text="购物车" :to="{name:'shopCart'}"/>
      <van-goods-action-button @click="$refs.overlayRef.popupShow=true,$refs.overlayRef.buyMode=false" class="cartbutton" type="warning" text="加入购物车"/>
      <van-goods-action-button  @click="$refs.overlayRef.popupShow=true,$refs.overlayRef.buyMode=true" class="cartbutton" type="danger" text="立即购买"/>
    </van-goods-action>
    <popup :goodsInfo="goodsInfo" ref="overlayRef"/>
  </div>
</template>

<script>
import {mapGetters}from'vuex'
import Popup from './Popup.vue';
export default {
  props: ['id'],
  components: {
    Popup
  },
  data() {
    return {
      goodsInfo:{},
    };
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  watch: {
  },
  created() {
    this.getSpuDetail()
  },
  methods: {
    getSpuDetail(){
      this.$http.get(`/api/spu/detail/${this.id}`).then(
        response=>{
          console.log('Goods',response.data)
          this.goodsInfo=response.data
          if(this.goodsInfo.tags!==null&&this.goodsInfo.tags!=='')
              this.goodsInfo.tags=this.goodsInfo.tags.split('$')
        },
        error=>{
          console.log('Goods',error.msg)
        }
      )
    }
  },
};
</script>
<style scoped lang="less">
  .goodsInfo{
    margin: 10px;
    .goodsInfo p{
      padding-left: 20px;
      text-align: left;
    }
    .goodsInfo-left{
      float: left;
      width: 83%;
    }
  }
  .carbutton{
    margin-top: 10px;
  }
  .subtitle{
    color: rgb(95, 126, 151);
    padding-top: 10px;
    font-size: 13px;
  }
  .tags-out{
    text-align: left;
    margin-left: 15px;
  }
  .tags{
    margin-left: 4px;
  }
  .price{
    color: rgb(62, 62, 131);
    font-size: 16px;
    padding-top: 10px;
  }
</style>